<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/* 通用选择器： 通用效果 盒模型:内外边距*/
			*{
				margin: 0;
				padding: 0;
			}
			/*1.容器：看3D视觉--①宽高②居中③视觉属性*/
			.container{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				/* 视觉属性：  数值px;  拉开距离*/
				perspective: 3000px;
				bor der: 1px solid red;
			}
			/*2.魔方整体：①宽高②指定3D坐标轴【3D效果层】③查看3D坐标轴【X，Y】④动画*/
			.box{
				width: 300px;
				height: 300px;
				/* 3D效果层：指定3D坐标轴 具备 X、Y、Z轴 */
				transform-style: preserve-3d;
				/*倾斜，查看3D坐标轴*/
				transform: rotateX(45deg) rotateY(45deg);
				animation: mofang 10s linear infinite;
				}
				@keyframes mofang{
					0%{
					    transform: rotateX(45deg) rotateY(45deg) 
					}
					70%{
					    transform: rotateX(180deg) rotateY(180deg) 
					}
					100%{
						transform: rotateX(360deg) rotateY(360deg) 
					}
				}
				/* 3.六个面，公共属性：设定宽高，绝对定位 */
				.page{
					  width: 300px;
					  height: 300px;
					  /*6个面定到1个点，定做坐标轴，6个面坐标轴一致*/
					  position: absolute;
				}
			    /* 3.1六个添加6个颜色*/
				.page_top{
					background-color: #e4393c;
					/*Z轴 顶部前面平移150px*/
					transform: translateZ(150px);
					background: url(../Project/111/1.jpeg);
					background-size: cover; /* 图片覆盖整个面（可能裁剪边缘） */
					background-position: center; /* 图片居中 */
				}
				.page_bottom{
					background-color: #fff000;
					/*Z轴 底部前面平移150px*/
					transform: translateZ(-150px);
					background: url(../Project/111/2.jpeg);
					background-size: cover; /* 图片覆盖整个面（可能裁剪边缘） */
					background-position: center; /* 图片居中 */
				}
				.page_left{
					background-color: #0000ff;
					/*X轴  向左平移 -150px 按照Y轴方向旋转90deg*/
				    transform: translateX(-150px) rotateY(90deg);
				    background: url(../Project/111/3.jpeg);
					background-size: cover; /* 图片覆盖整个面（可能裁剪边缘） */
					background-position: center; /* 图片居中 */
				}
				.page_right{
					background-color: #55ffff;
					/*X轴  向右平移 150px 按照Y轴方向旋转90deg*/
					transform: translateX(150px) rotateY(90deg);
					background: url(../Project/111/4.jpeg);
					background-size: cover; /* 图片覆盖整个面（可能裁剪边缘） */
					background-position: center; /* 图片居中 */
				}
				.page_before{
					background-color: #dc14ff;
					/*Y轴  向前平移 150px 按照X轴 旋转90deg*/
					transform: translateY(150px) rotateX(90deg);
					background: url(../Project/111/5.jpeg);
					background-size: cover; /* 图片覆盖整个面（可能裁剪边缘） */
					background-position: center; /* 图片居中 */
				}
				.page_after{
					background-color: #ff5500;
					/*Y轴  向后平移 -150px 按照X轴 旋转90deg*/
					transform: translateY(-150px) rotateX(90deg);
					background: url(../Project/111/6.jpeg);
					background-size: cover; /* 图片覆盖整个面（可能裁剪边缘） */
					background-position: center; /* 图片居中 */
				}
		</style>
	</head>
	<body>
		<!-- 3D魔方   1.容器：看3D效果 2.魔方整体 3.6个面-->
		<div class="container">
			<div class="box">
				<!-- 6个面特点：①6个面宽高一致 ②颜色不一致
			     使用类选择器：多别名方式解决上述问题-->
				<div class="page page_top"></div>
				<div class="page page_bottom"></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
		<audio src="111/beiyin.mp3" autoplay loop></audio>
	</body>
</html>